import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import React, { useState } from 'react'
import { AtTag } from 'taro-ui'
import './index.scss'

interface ICCourseCard {
  data: {
    courseImg: string
    offlineImg?: string
    registrationType: number
    price: number
    personsName?: string
    label: string

    offlineTitle?: string
    courseName?: string
  }
}

/**
 * 共用课程卡片 组件
 * @param courseName title
 * @param registrationType  类型 2结束 1进行中  0 未开始
 * @param courseImg 图片
 * @param price 价格
 * @param label 标签
 * @return JSX.Element
 */

//  课程卡片
export default function CCourseCard(params: ICCourseCard) {
  const storagesystem = Taro.getStorageSync('system')
  const [system] = useState(storagesystem)

  const { courseName = '', registrationType = 0, courseImg = '', offlineImg = '', price = '', label = '', offlineTitle = '' } = params.data

  return (
    <View className='CCourseCard'>
      <View className='CCourseCard_left'>
        <Image src={courseImg || offlineImg}>
          {registrationType === 2 ? (
            <View className='label_finished'>已结束</View>
          ) : registrationType === 1 ? (
            <View className='label_sign_up'>报名中</View>
          ) : registrationType === 0 ? (
            <View className='label_not_started'>未开始</View>
          ) : (
            ''
          )}
        </Image>
      </View>

      <View className='CCourseCard_right'>
        <View className='CCourseCard_title'>{courseName || offlineTitle}</View>
        <View className='CCourseCard_label'>
          {label &&
            label.split(',').map((item, index) => {
              return (
                <AtTag type='secondary' active={true} size='small' circle key={index}>
                  {item}
                </AtTag>
              )
            })}
        </View>
        {system.indexOf('iOS') < 0 ? (
          <Text className='CCourseCard_price'>{price ? '￥' + price : '免费'}</Text>
        ) : (
          <Text className='CCourseCard_price'>免费</Text>
        )}
      </View>
    </View>
  )
}
